/*
* 苏州海管家物流科技有限公司（https://www.hgj.com/）.
* 苏公网安备32059002003385号 © 2015-2022 Hgj.com All Rights Reserved. | 苏ICP备15030950号.
* @Date: 2022.03.03.
* @Author
* @Description 企点管理后台 - 企业管理 模块.
**/

<script setup lang="ts" name="CompanyManage">
import { ref } from "vue"
import { IKey } from "@/typings"
import { postData } from "@/api"
import urls from "@/api/urls"
import QueryCondition from '@/components/QueryCondition.vue'
import { effectiveOption } from "@/utils/constant"

let params = {
    num: 0,
    size: 10
}
const queryList = ref([{
    id: 'companyName',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "企业名称",
    placeholder: '请输入企业名称'
}, {
    id: 'qdCompanyName',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "企点简称",
    placeholder: '请输入企点简称'
}, {
    id: 'expireState',
    value: '',
    defaultValue: '',
    typeName: 'select',
    label: "主号状态",
    options: [...effectiveOption],
    placeholder: '请选择主号状态'
}, {
    id: '__dateRange$mainExpireFrom$mainExpireTo',
    value: '',
    defaultValue: '',
    typeName: 'daterange',
    label: "企业号到期时间",
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期'
},  {
    id: '__dateRange$mainRenewFrom$mainRenewTo',
    value: '',
    defaultValue: '',
    typeName: 'daterange',
    label: "应用开通时间",
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期'
},  {
    id: '__dateRange$appExpireTimeFrom$appExpireTimeTo',
    value: '',
    defaultValue: '',
    typeName: 'daterange',
    label: "应用截止时间",
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期'
},  {
    id: 'bindTimes',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "应用购买期限",
    placeholder: '请输入应用购买期限'
}])
// 表格 二级里面查询条件
const secondQuery = ref([{
    id: 'name',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "企业名称",
    placeholder: '请输入企业名称'
}, {
    id: 'mobile',
    value: '',
    defaultValue: '',
    typeName: 'input',
    label: "手机号",
    placeholder: '请输入手机号'
}])
let total = ref(0)
const tableData = ref()
/**
 *@Description 分页 current-change 触发事件.
 *@Return .
 **/
const getCompanyList = async () => {
    const res = await postData(urls.companyListUrl, { ...params })

    total.value = res.data.total
    const { records } = res.data

    tableData.value = [...records]
    console.log('tableData---------', tableData.value)
}

getCompanyList()
/**
 *@Description 查询组件 查询按钮 emit 方法监听 .
 *@Return { id: value }.
 **/
const renderSearch = (data: IKey) => {
    console.log('renderSearch--------', data)
    params = {...params, ...data}

    console.log('params---------', params)
    // getClueList()
}
/**
 *@Description 查询组件 重置按钮 emit 方法监听 .
 *@Return { id: defaultValue }.
 **/
const renderReset = (data: IKey) => {
    console.log('renderReset', data)

    params = {...params, ...data}
    // getClueList()
}
/**
 *@Description 获取当前企业下 所有员工列表 .
 *@Return .
**/
const getEmployee = async (row, rows) => {
    console.log('row, rows---111-', row.id, rows[0].id)


    const arr = rows.filter((i) => i.id === row.id)

    console.log('arr----', arr)
    if (!arr.length) return
    const param = {
        num: 0,
        size: 10,
        corpId: row.corpId,
        ...row.detailSearchParam
    }
    console.log('param-----------', param)
    const res = await postData(urls.employeeUrl, { ...param })
    row.rowEmployee = res.data.records
    row.rowTotal = res.data.total
    row.rowNum = 1
       
    // console.log('getEmployee', res)


}
const handleSetCabin = (val, row) => {

    console.log('val, row', val, row)

    /* let res = await setCabin({ id: row.id, status: val })
       if (res.data) {
           this.$message.success('设置成功')
       } else this.$message.error('设置失败') */
}
const  handleSetAuth = (val, row, tableRow) => {
    console.log('val, row', val, row, tableRow)

    /* let res = await setAuth({
           flag: val,
           id: row.id,
           openId: row.openId
       })
       if (res.data) {
           this.$message.success('设置成功')
           if (val) {
               tableRow.enableAppTotal++
           } else {
               tableRow.enableAppTotal--
           }
       } else this.$message.error('设置失败') */
}
const handleRefreshOne = (row) => {
    console.log('val, row',  row)
    /* const id = row.id
       await companyRefresh(id)
       this.$message.success('刷新成功')
       this.getEmployee(row, this.data.records) */
}
const handleChangeDetailPage = (val, row) => {
    console.log('val, row',  val, row)


    /* let res = await this.searchDetail(row)
       row.detailRow = res.data.records
       row.detailTotal = res.data.total */
}
</script>
<template>
  <!-- 查询区域 -->
  <QueryCondition title="我是父组件标题" :queryList="queryList" @emitSearch="renderSearch" @emitReset="renderReset" />
  <!-- 表格 -->
  <el-table ref="table" border :data="tableData" row-key="id" @expand-change="getEmployee">

    <el-table-column fixed="left" type="expand">
      <template #default="props">
        <!-- 查询区域 -->
        <QueryCondition title="我是二级查询条件" :queryList="secondQuery" @emitSearch="renderSearch" @emitReset="renderReset" />
        <!-- 扩展 table -->
        <el-table :data="props.row.rowEmployee">

          <el-table-column width="140" label="账号名" prop="name" />
          <el-table-column width="60px" label="头像">
            <template #default="{ row }">
              <el-image :src="row.face" />
            </template>
          </el-table-column>

          <el-table-column width="60px" label="状态">
            <template #default="{ row }">
              <span>{{ row.active == 2 ? '正常' : '停用' }}</span>
            </template>
          </el-table-column>

          <el-table-column width="180" label="OpenId" prop="openId" />
          <el-table-column width="120" label="手机号" prop="mobile" />

          <el-table-column label="现舱商机">
            <template #default="{ row }">
              <div>
                {{ row.cabinHarbourList.replace(',', '\n') }}
              </div>
            </template>
          </el-table-column>

          <el-table-column label="关键词">
            <template #default="{ row }">
              <el-tooltip placement="top">
                <template #content> {{ row.keyWords }} </template>

                {{ row.keyWords }}
              </el-tooltip>
            </template>
          </el-table-column>
            
          <el-table-column width="180" label="创建时间" prop="createdAt" />
          <el-table-column width="180" label="过期时间" prop="expireTime" />

          <el-table-column width="70" label="超续费">
            <template #default="{ row }">
              <span>{{ row.timeout ? '是' : '否' }}</span>
            </template>
          </el-table-column>

          <el-table-column width="100px" label="关键词设置">
            <template #default="{ row }">
              <el-switch
                v-model="row.enableCabinFlag" :active-value="1" :inactive-value="0"
                @change="(val) => { handleSetCabin(val, row, props.row )}" />
            </template>
          </el-table-column>

          <el-table-column width="80px" label="权限设置">
            <template #default="{ row }">
              <el-switch
                v-model="row.appSwitchFlag" :active-value="1" :inactive-value="0"
                @change="(val) => {handleSetAuth( val, row, props.row )}" />
            </template>
          </el-table-column>
        </el-table>
        <!-- 二级分页 -->
        <el-pagination
          background :page-size="10" :total="props.row.rowTotal" v-model:current-page="props.row.rowNum"
          @current-change=" (val) => { handleChangeDetailPage(val, props.row) }" />
      </template>
    </el-table-column>
    <!-- 一级表格 -->
    <el-table-column width="140" label="企业名称" prop="name" />
    <el-table-column width="180" label="企点简称" prop="qdCompanyName" />
      
    <el-table-column width="180" label="企业号到期时间" prop="expireTime">
      <template #default="{ row }">
        {{ row.expireTime }}
      </template>
    </el-table-column>

    <el-table-column width="80" label="主号状态">
      <template #default="{ row }">
        <span>{{ row.status }}</span>
      </template>
    </el-table-column>

    <el-table-column width="140" label="管理主QQ" prop="masterQQ" />
    <el-table-column width="180" label="应用开通时间" prop="createTime">
      <template #default="{ row }">
        {{ row.createTime }}
      </template>
    </el-table-column>

    <el-table-column width="140" label="最新操作人" prop="updateBy" />
    <el-table-column width="80" label="启用人数" prop="enableAppTotal" />
    <el-table-column width="180" label="应用截止时间" prop="appExpireTime" />
    <el-table-column width="100" label="到期倒计时" prop="countDown" />
    <el-table-column width="110" label="应用购买期限" prop="bindTimes" />
    <!-- fixed="right" -->
    <el-table-column width="140" label="操作">
      <template #default="{ row }">
        <SettingModal modal-type="设置" :value="row">
          <el-button type="text"> 设置 </el-button>
        </SettingModal>

        <SettingModal modal-type="续费" :value="row" v-if="row.isFirst">
          <el-button type="text"> 续费 </el-button>
        </SettingModal>

        <el-button type="text" @click="handleRefreshOne(row)"> 刷新 </el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<style lang="scss" scoped></style>
